<template>
    <common>
        <div class="ve_container">
            <el-card :body-style="{ background: 'rgba(0,0,0,0.15)' }">
                <el-button class="ve_submit" type="plain" style="float: right">
                    <router-link
                        :to="{ path: 'login' }"
                        style="text-decoration: none; color: inherit"
                        >登陆
                    </router-link>
                </el-button>
                <h1>无人车mock系统</h1>
                <transition-group name="el-fade-in-linear">
                    <el-scrollbar height="400px">
                        <p
                            v-for="zone in zone_list"
                            :key="zone.code"
                            @click="chooseZone(zone)"
                            class="scrollbar-zone-item"
                        >
                            {{ zone.name }}
                        </p>
                    </el-scrollbar>
                    <el-button v-if="zone_list.length === 0">
                        <router-link
                            :to="{ path: 'zone/init' }"
                            style="text-decoration: none; color: inherit"
                            >创建个人空间
                        </router-link>
                    </el-button>
                </transition-group>
            </el-card>
        </div>
    </common>
</template>

<script setup>
import {
    SET_VERIFICATION_CODE,
    SET_WECHAT_KEY_WORD,
    SET_WECHAT_VERIFICATION_CODE,
    SET_ZONE_ID,
} from "@/store/modules/app/type";
import {
    moduleName,
    wechat_key_word,
    wechat_verification_code,
} from "@/config";
import Common from "@/components/Common";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();

const zone_list = ref([]);
const success = ref(false);
router.options.isAddDynamicMenuRoutes = false;

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    try {
        const { code, data } = await VE_API.system.findUseZoneList({
            module: moduleName,
        });
        if (code === 0) {
            zone_list.value = data;
            // 存储区域
            // await store.dispatch(`app/${SET_ZONE_LIST}`, zone_list.value);
            if (zone_list.value.length === 1) {
                await chooseZone(zone_list.value[0]);
            }
        } else {
            // 业务错误已在axios拦截器中处理
            console.warn("获取区域列表失败:", data?.message);
        }
    } catch (error) {
        // 网络错误等异常情况已经在axios拦截器中处理
        console.error("获取区域列表异常:", error);
    }
};
const chooseZone = async (zone) => {
    await store.dispatch(`app/${SET_ZONE_ID}`, zone.id.toString());

    //
    // 获取title信息
    try {
        const titleInfo = await VE_API.configApi.getTitleInfo();
        if (titleInfo.code === 0 && titleInfo.data != null) {
            if (titleInfo.data.enabled === true) {
                await store.dispatch(
                    `app/${SET_WECHAT_VERIFICATION_CODE}`,
                    titleInfo.data.wechatVerificationCode == null
                        ? wechat_verification_code
                        : titleInfo.data.wechatVerificationCode,
                );
                await store.dispatch(
                    `app/${SET_WECHAT_KEY_WORD}`,
                    titleInfo.data.wechatKeyWord == null
                        ? wechat_key_word
                        : titleInfo.data.wechatKeyWord,
                );
            } else {
                // 不验证
                await store.dispatch(`app/${SET_VERIFICATION_CODE}`, true);
                await store.dispatch(
                    `app/${SET_WECHAT_VERIFICATION_CODE}`,
                    true,
                );
            }
        }
    } catch (error) {
        // 网络错误等异常情况已经在axios拦截器中处理
        console.error("获取标题信息异常:", error);
    }
    success.value = true;
    await router.push({ name: "AppMain" });
};
onMounted(async () => {
    await getDataList();
});
</script>

<style lang="scss" scoped>
.ve_container {
    position: absolute;
    z-index: 1;
    width: 400px;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
    transition: all 1s;
    min-height: 273px;
    text-align: center;

    h1 {
        font-size: 24px;
        transition: all 1s;
        font-weight: bold;
        margin-bottom: 36px;
    }

    .ve_form {
        .ve_submit {
            width: 100%;
        }

        :deep(.el-input-group__prepend) {
            padding: 0 10px;
        }
    }
}

.el-form-item {
    width: 100%;
}
.scrollbar-zone-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    cursor: pointer;
}
.scrollbar-zone-item:hover {
    background-color: #07617e;
    color: #eef4fe;
}
</style>
